<template>
  <el-select
    v-model="selectValue"
    filterable
    clearable
    remote
    value-key="placeCode"
    :multiple-limit="10"
    :placeholder="placeholder"
    :remote-method="getPlace"
    :multiple="multiple"
    @change="change"
  >
    <template v-for="group in placeList">
      <el-option-group
        v-if="group.options.length > 0"
        :key="group.label"
        :label="group.label"
      >
        <el-option
          v-for="item in group.options"
          :key="item.placeCode"
          :label="item.placeName"
          :value="multiple ? item : item.placeCode"
        ></el-option>
      </el-option-group>
    </template>
  </el-select>
</template>
<script>
export default {
  props: {
    value: {
      type: [String, Array]
    },
    multiple: {
      //是否多选
      type: Boolean,
      default: false
    },
    filterType: {
      //过滤类型
      type: String,
      default: ''
    },
    source: {
      // 数据源
      type: Array,
      default: () => []
    },
    placeholder: {
      type: String,
      default: '目的地'
    },
    areaCode: {
      //过滤地区
      type: String,
      default: ''
    }
  },
  data () {
    return {
      selectValue: '',
      placeList: []
    }
  },
  watch: {
    value: {
      handler: function (val, o) {
        if (val && (this.selectValue == '' || this.selectValue == [])) {
          this.setBsasPlaceList(val)
        }
        this.selectValue = val
      },
      immediate: true
    }
  },
  created () {
    if (this.multiple) {
      this.setBsasPlaceList(this.value)
    }
    if (this.source.length > 0) {
      this.setBsasPlaceList(this.source)
    }
  },
  methods: {
    setBsasPlaceList (arr = []) {
      // 构造数据源数组
      this.placeList = [
        {
          label: '地区',
          options: []
        },
        {
          label: '景区',
          options: []
        }
      ]
      // 类型对象
      let typeObj = {
        0: '省会',
        1: '地区',
        2: '区县',
        3: '景区',
        4: '场馆'
      }
      arr.map(d => {
        if (d.placeLevel || d.placeLevel) {
          d.typeName = typeObj[d.placeLevel]
        }
        if (d.placeType == 0) {
          this.placeList[0].options.push(d)
        } else {
          this.placeList[1].options.push(d)
        }
      })
    },
    change (event) {
      this.$emit('input', event)
      this.$emit('change', event)
    },
    getPlace (key) {
      if (!key) {
        return
      }
      this.$POST('/one-travel-api/position/searchPositionNmg', {
        key: key
      }).then(res => {
        if (res.errorCode == '00000') {
          this.setBsasPlaceList()
          if (res.data.dictAreaEntityList) {
            let cityList = res.data.dictAreaEntityList

            cityList.forEach(d => {
              this.placeList[0].options.push({
                placeName: d.name,
                placeCode: d.code,
                placeType: 0,
                typeName: '地区'
              })
            })
          }

          if (res.data.scenicEntityList) {
            let scenicList = res.data.scenicEntityList

            scenicList.forEach(d => {
              this.placeList[1].options.push({
                placeName: d.name,
                placeCode: d.id,
                placeType: 1,
                typeName: d.typeId == '01' ? '景区' : '场馆'
              })
            })
          }
          if (this.filterType) {
            this.placeList.map(d => {
              d.options = d.options.filter(o => {
                return this.filterType.split('|').indexOf(o.typeName) >= 0
              })
            })
          }
        }
      })
    }
  }
}
</script>
